<template>
	<view class="status-bar" :style="{height:statusBarHeight,opacity:opacity}"></view>
</template>

<script>
import { statusBarHeight } from "../../assets/utils/config";
	export default {
		data() {
			return {
                statusBarHeight,
                opacity:0,
			}
		},
		onShow(){
			console.log('load')	
		},
        onPageScroll({ scrollTop }) {
            console.log(scrollTop)
            let percent = scrollTop / 348
            this.opacity = percent
        },
		mounted() {
            console.log('ddddd')
		},
		methods: {
		}
	}
</script>

<style lang="less" scoped>
	@import '../../assets/styles/common.less';
    .status-bar{
        position: fixed;
        background: #ffffff;
        width: 100%;
        top:0;
        left:0;
        z-index: 50;
        filter: blur(5);
    }
</style>